<template>
  <div>
    <basic-container>
      <div class="dateSelect">
        <div>日期 ：</div>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handleDateChange">
        </el-date-picker>
        <el-button @click="clearDate" class="dateClear">清空日期</el-button>
        <button @click="openNewWebsite" class="big-data">数据大屏</button>
        <el-icon color="#409EFC" class="no-inherit">
          <Share />
        </el-icon>
      </div>
      <div class="first_el">笔记数据概览</div>
      <div class="dataPointList" >
        <div class="content" :style="{ backgroundColor: '#F4F2F2' }">
          <div class="numContent">{{noteNum}}</div>
          <div>笔记总发布量</div>
        </div>
        <div class="content" :style="{ backgroundColor: '#F4F2F2' }">
          <div class="numContent">{{noteReadNum}}</div>
          <div>笔记总阅读量</div>
        </div>
        <div class="content" :style="{ backgroundColor: '#F4F2F2' }">
          <div class="numContent">{{noteInteractionNum}}</div>
          <div>笔记总互动量</div>
        </div>
        <div class="content" :style="{ backgroundColor: '#F4F2F2' }">
          <div class="numContent">{{noteClueNum}}</div>
          <div>笔记总线索量</div>
        </div>
<!--        <div v-for="(item,index) in dataPointList" :key="index" :style="{ backgroundColor: item.bgColor }">-->
<!--          -->
<!--        </div>-->
      </div>
      <div class="first_el" style="margin-top: 30px">笔记发布完成情况</div>
      <div>
        <el-row>
          <el-col :span="14">
            <div class="progressContainer">
              <div class="testTitle">门店助手 :</div>
              <el-progress
                :percentage="percentage1"
                :color="customColor"
                class="progressBar"
                :stroke-width="16"
              ></el-progress>
            </div>
            <div class="progressContainer2">
              <div class="testTitle">销售账号 :</div>
              <el-progress
                :percentage="percentage2"
                :color="customColorMethod"
                class="progressBar"
                :stroke-width="16"
              ></el-progress>
            </div>
          </el-col>
          <el-col span="10">
            <div class="progressContainerCircle">
              <el-progress
                :percentage="percentage3"
                :color="customColor"
                :stroke-width="14"
                type="circle"
              ></el-progress>
              <div class="progressContainerCircleText">总完成率</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="first_el" style="margin-top: 40px">各账号情况</div>
      <el-table
        :data="tableData"
        class="dataTableOne"
        :row-style="{height: '60px'}"
        :cell-style="{padding: '12px'}"
        :header-row-style="{height: '80px'}"
        style="overflow-y: auto;"
      >
        <el-table-column
          prop="storeName"
          label="门店名称"
          width="300px">
        </el-table-column>
        <el-table-column
          prop="accountName"
          label="账号名称"
          width="300px">
        </el-table-column>
        <el-table-column
          prop="operator"
          label="运营人"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="notesNum"
          label="笔记发布量"
          width="150px"
          :cell-style="customCellStyle">
        </el-table-column>
        <el-table-column
          prop="readNum"
          label="笔记阅读量"
          width="150px">
        </el-table-column>
        <el-table-column
          prop="interactionNum"
          label="笔记互动量"
          width="150px">
        </el-table-column>
        <el-table-column
          prop="clueNum"
          label="线索量"
          width="150px">
        </el-table-column>
      </el-table>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import BasicContainer from '@/components/basic-container/main.vue';
import {getNoteDataOverview, getNoteCompletionRate, getAccountsSituation} from "@/api/icc/dataBoard";
import { dateFormat } from '@/utils/date';

export default {
  name: 'wel',
  components: { BasicContainer },
  data() {
    return {
      noteNum: '0',
      noteReadNum: '0',
      noteInteractionNum: '0',
      noteClueNum: '0',
      dataPointList: [{
        name: '笔记总发布量',
        bgColor: '#F4F2F2',
        noteNum: 0
      }, {
        name: '笔记总阅读量',
        img: '../../../public/img/icon/icon_kuaishou.png',
        bgColor: '#F4F2F2',
        data: 0
      }, {
        name: '笔记总互动量',
        img: '../../../public/img/icon/icon_dy.png',
        bgColor: '#F4F2F2',
        data: 0
      }, {
        name: '笔记总线索量',
        img: '../../../public/img/icon/icon_bilibili.png',
        bgColor: '#F4F2F2',
        data: 0
      }],
      fixData: [{
        name: '笔记总发布量',
      }, {
        name: '笔记总阅读量',
      }, {
        name: '笔记总互动量',
      }, {
        name: '笔记总线索量',
      }],
      tableData: [],
      percentage1: 20,
      percentage2: 30,
      percentage3: 25,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: ''
    };
  },
  created() {
    // 在组件创建时从后端获取数据
    this.fetchTableData();
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    openNewWebsite() {
      // 指定要打开的网站链接
      const url = 'https://ai.goviewlink.com/chart/preview/cls4e9o2y001pp6ofh3g4t3uc';
      // 使用 window.open() 在新窗口中打开链接
      window.open(url, '_blank');
    },
    handleChange(val) {
      window.console.log(val);
    },
    clearDate() {
      this.value2 = []; // 清空日期
      getNoteDataOverview(null,null).then(response => {
        // 更新tableData以显示从后端获取的数据
        this.noteClueNum = response.data.data.noteClueNum;
        this.noteNum = response.data.data.noteNum;
        this.noteReadNum = response.data.data.noteReadNum;
        this.noteInteractionNum = response.data.data.noteInteractionNum;
      }).catch(error => {
        // 处理错误
        console.error('Error fetching table data:', error);
      });

      getNoteCompletionRate(null,null).then(response => {
        // 更新tableData以显示从后端获取的数据
        this.percentage1 = response.data.data.storeAssistant;
        this.percentage2 = response.data.data.salesAccount;
        this.percentage3 = response.data.data.totalCompletionRate;
      }).catch(error => {
        // 处理错误
        console.error('Error fetching table data:', error);
      });

      getAccountsSituation(null,null).then(response => {
        // 更新tableData以显示从后端获取的数据
        this.tableData = response.data.data;
      }).catch(error => {
        // 处理错误
        console.error('Error fetching table data:', error);
      });
    },
    handleDateChange(dateRange) {
      // dateRange是选择的日期范围，格式为 [开始日期, 结束日期]
      console.log('选择的日期范围:', dateRange);
      const startDt = dateFormat(dateRange[0], 'yyyy-MM-dd');
      const endDt = dateFormat(dateRange[1], 'yyyy-MM-dd');
      // 在这里可以调用你的方法，并将dateRange作为参数传递
      this.fetchTableData(startDt, endDt);
    },
    customCellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'publishCount') {
        return { color: 'blue' }; // 设置该列文字颜色为蓝色
      }
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
    fetchTableData(startDt,endDt) {
      getNoteDataOverview(startDt,endDt).then(response => {
        // 更新tableData以显示从后端获取的数据
        this.noteClueNum = response.data.data.noteClueNum;
        this.noteNum = response.data.data.noteNum;
        this.noteReadNum = response.data.data.noteReadNum;
        this.noteInteractionNum = response.data.data.noteInteractionNum;
      }).catch(error => {
        // 处理错误
        console.error('Error fetching table data:', error);
      });

      getNoteCompletionRate(startDt,endDt).then(response => {
        // 更新tableData以显示从后端获取的数据
        this.percentage1 = response.data.data.storeAssistant;
        this.percentage2 = response.data.data.salesAccount;
        this.percentage3 = response.data.data.totalCompletionRate;
      }).catch(error => {
        // 处理错误
        console.error('Error fetching table data:', error);
      });

      getAccountsSituation(startDt,endDt).then(response => {
        // 更新tableData以显示从后端获取的数据
        this.tableData = response.data.data;
      }).catch(error => {
        // 处理错误
        console.error('Error fetching table data:', error);
      });
    },
    autoScrollTable() {
      const table = this.$el.querySelector('.dataTableOne .el-table__body-wrapper');
      if (table) {
        let scrollTo = 0;
        this.scrollInterval = setInterval(() => {
          if (scrollTo < table.scrollHeight - table.clientHeight) {
            scrollTo += 1; // 每次滚动的像素值
            table.scrollTop = scrollTo;
          } else {
            scrollTo = 0;
          }
        }, 30); // 滚动速度
      }
    },
    mounted() {
      this.autoScrollTable();
    },
    beforeDestroy() {
      clearInterval(this.scrollInterval);
    }
  },
};
</script>

<style>
.first_el {
  margin-top: 32px; /* 根据需要调整位置 */
  margin-left: 60px; /* 根据需要调整位置 */
  color: #3F9EFF; /* 文字颜色 */
  font-size: 28px;
  /* 添加其他你需要的样式，例如字体大小、行高等 */
}

.dataPointList {
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
  margin-left: 45px;
  > div {
    width: 220px;
    height: 100px;
    margin: 36px;
    font-size: 20px;
    background-color: #cccccc;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .numContent {
      font-size: 36px;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.dataTableOne {
  margin-left: 70px;
  margin-top: 20px;
  width: 88%;
  height: 80%;
  font-size: 22px;
  overflow-y: auto; /* 显示垂直滚动条 */
}

.progressBar {
  width: 68%;
}

.dateSelect {
  margin-top: 2px;
  margin-left: 60px;
  font-size: 20px;
  color: #3F9EFF; /* 文字颜色 */
  width: 700px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.dateClear {
  margin-left: 20px;
  color: #3F9EFF; /* 文字颜色 */
}

.progressContainer {
  margin-top: 52px;
  margin-left: 80px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.progressContainer2 {
  margin-top: 52px;
  margin-left: 80px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.progressContainerCircle {
  margin-top: 30px;
  margin-left: 50px;
}

.progressContainerCircleText {
  margin-top: 10px;
  margin-left: 30px;
}

.testTitle {
  margin-right: 16px; /* 可以根据需要调整标题与进度条之间的间距 */
  font-size: 18px;
}

.big-data {
  margin-left: 20px;
  border: none;
  background-color: transparent; /* 设置背景透明 */
  color: cornflowerblue; /* 按钮文字颜色，根据需要调整 */
  font-size: 18px; /* 文字大小，根据需要调整 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  //text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文字阴影 */
  font-weight: bold; /* 加粗 */
  text-decoration: underline; /* 添加下划线 */
}
</style>
